<template>
  <view>
    <view class="backPage">
      <view class="circle">
        <view class="circle__inside">
          <view class="circle__inside--title">今日步数</view>
          <view class="circle__inside--num">{{todayStep}}</view>
          <view class="circle__inside--rules">兑换{{targetStep}}步数可获得{{integral}}积分</view>
          <view class="circle__inside--finish">{{completionDegree}}%已完成</view>
        </view>
      </view>
    </view>
    <view class="backPage" @tap="changeCode">
      <view :class="(todayStep>targetStep ? 'change' :'noChange') + ' '">步数兑换</view>
    </view>
    <image
      src="http://medusa-small-file.oss-cn-hangzhou.aliyuncs.com/gruul/20191127/c106f55afc9094084326f21ab359580.png"
      class="bottomImg"></image>
  </view>
</template>


<script lang='ts'>
  import {
    Component,
    Vue
  } from 'vue-property-decorator'
  import {
    stepChangeRule,
    changeSteps
  } from "@/api/modules/integral";

  @Component({})
  export default class IntegralChange extends Vue {
    todayStep: number = 0
    targetStep: number = 0
    integral: number = 0
    completionDegree: string = ""
    timeout: number = 0

    // 页面周期函数--监听页面加载
    onLoad(options) {
      this.getChangeRule(options.todayStep);
    }

    getChangeRule(todayStep) {
      stepChangeRule({
        theCurrentStep: todayStep
      }).then(res => {
        this.setData({
          todayStep: res.todayStep,
          targetStep: res.targetStep,
          integral: res.integral,
          completionDegree: res.completionDegree,
        });
      });
    }

    /**
     * 兑换功能
     */
    changeCode() {
      if (this.todayStep < this.targetStep) return;

      if (this.timeout) {
        clearTimeout(this.timeout);
      }
      this.timeout = setTimeout(() => {
        const parma = {
          targetStep: this.targetStep,
          todayStep: this.todayStep,
        };
        changeSteps(parma)
          .then(res => {
            wx.showToast({
              title: "兑换成功",
              icon: "none",
            });
            this.getChangeRule(res);
          })
          .catch(err => {
            wx.showToast({
              title: err,
              icon: "none",
            });
          });
      }, 300);
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #F6F6F6;

  }

  .backPage {
    display: flex;
    justify-content: center;
    margin-bottom: -15px;
  }

  @include b(circle) {
    margin-top: 75px;
    width: 225px;
    height: 225px;
    border-radius: 100%;
    background-color: #FF3363;
    @include flex(center, center);

    @include e (inside) {
      width: 200px;
      height: 200px;
      border-radius: 100%;
      background-color: #FAFAFA;
      position: relative;

      @include m(title) {
        position: relative;
        top: 25px;
        left: 0px;
        font-size: 17px;
        display: flex;
        justify-content: center;
      }

      @include m(num) {
        position: relative;
        top: 60rpx;
        left: 0rpx;
        font-size: 80rpx;
        font-weight: bold;
        color: #FF3363;
        display: flex;
        justify-content: center;
      }


      @include m(rules) {
        position: relative;
        top: 35px;
        left: 10px;
        font-size: 11px;
        width: 180px;
        height: 40px;
        border-radius: 40px;
        @include flex(center);
        color: #FF3363;
        border: 1px solid #FF3363;
      }

      @include m(finish) {
        position: relative;
        top: 50px;
        left: 0px;
        font-size: 14px;
        display: flex;
        justify-content: center;
      }

    }
  }

  .change {
    width: 180px;
    height: 40px;
    border-radius: 40px;
    color: white;
    background-color: #FF3363;
    display: flex;
    justify-content: center;
    -moz-box-shadow: -2px -1px 20px #FCA6BA, 2px 2px 5px #FCA6BA;
    -webkit-box-shadow: -2px -1px 20px #FCA6BA, 2px 2px 5px #FCA6BA;
    box-shadow: -2px -1px 20px #FCA6BA, 2px 2px 5px #FCA6BA;
    margin-top: 40px;
    @include flex(center);
  }

  .noChange {
    width: 180px;
    height: 40px;
    border-radius: 40px;
    color: white;
    background-color: #A1A1A1;
    display: flex;
    justify-content: center;
    -moz-box-shadow: -2px -1px 20px #A1A1A1, 2px 2px 5px rgb(153, 153, 153);
    -webkit-box-shadow: -2px -1px 20px rgb(153, 153, 153), 2px 2px 5px rgb(153, 153, 153);
    box-shadow: -2px -1px 20px rgb(153, 153, 153), 2px 2px 5px rgb(153, 153, 153);
    margin-top: 40px;
    @include flex(center);
  }

  .bottomImg {
    position: fixed;
    bottom: 0;
    width: 100%;
  }
</style>